<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="$t('exam_details')"></navbar>
        <div class="content" >
          <div class="title">{{currentItem.title}}</div>
          <div class="content-box">
            <div class="score-box">
              <div class="score">
                <span>{{currentItem.score || 0}}</span>
                <span>{{ $t('points') }}</span>
              </div>
              <div class="score-tip" v-if="currentItem.pass===1">{{ $t('qualified_grades') }}</div>
              <div class="score-tip" v-if="currentItem.pass===0" style="color: #D9001B;">{{ $t('unqualified_grades') }}</div>
            </div>
          </div>
          <div class="info-box">
            <div>
              <span>{{$t('exam_time')}}：</span><span>{{currentItem.startTime}}</span>
            </div>
            <div>
              <span>{{$t('exam_duration')}}：</span><span>{{currentItem.duration}} {{ $t('mod_time_minute') }}</span>
            </div>
            <div>
              <span>{{$t('cos_total_score_exam')}}：</span><span>{{currentItem.maxScore}} {{ $t('points') }}</span>
            </div>
            <div>
              <span>{{$t('mod_passing_score')}}：</span><span>{{currentItem.passScore}} {{ $t('points') }}</span>
            </div>
            <div v-if="currentItem.pass===0">
              <span>{{$t('remaining_open_times')}}：</span><span>{{conutObj.remainingTimes || 0}} {{ $t('times') }}</span>
            </div>
            <div v-if="currentItem.pass===0">
              <span>{{$t('remaining_exam_times')}}：</span><span>{{conutObj.remainingSubmitTimes || 0}} {{ $t('times') }}</span>
            </div>
          </div>
        </div>
        <div v-if="isShow&&currentItem.pass===0&&(currentItem.maxAttempt === 0 || currentItem.maxAttempt >currentItem.pgrAttempt)" class="bot-btn">
          <div class="box">
            <span @click="goExam">{{ $t('retest_exam')}}</span>
          </div>
        </div>
    </div>
</template>

<script>
import { Notify } from 'vant';
export default {
    name: 'postTrainingExamination',
    components: {[Notify.Component.name]: Notify.Component},
    data() {
        return {
            currentItem: {},
            conutObj: {},
            isShow: true,
            locale: {
                'en': 'en-US',
                'cn': 'zh-CN',
                'hk': 'zh-TW'
            },
            token: window.localStorage.getItem('token')
        };
    },
    methods: {
        getDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/train/detail/${this.$route.query.id}`,
                params: {
                    resId: this.$route.query.resId
                }
            }).then((data) => {
                this.currentItem = data.data;
            });
        },
        goExam() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/course/train/checkOpenCount',
                params: {
                    itmId: this.$route.query.id,
                    resModId: this.$route.query.resId,
                    tkhId: this.$route.query.appTkhId
                }
            }).then((res) => {
                if (res.data.errCode === 'success') {
                    this.goToDetail();
                    // this.$router.push({path: `/examCertified/${this.$route.query.appTkhId}/${this.$route.query.resId}/${this.$route.query.id}`});
                }
            }).catch(err => {
                Notify({
                    message: err.response.data.errMsg,
                    color: '#fff',
                    background: '#D9001B'
                });
            });
        },
        goToDetail() {
            if (process.env.NODE_ENV === 'production_app') {
                if (window.plus) {
                    var ws = window.plus.webview.currentWebview();
                    // 如果真机调试就解注下面两行，注释第三行
                    // this.appUrl = 'http://192.168.31.80:8888';
                    // var embed = window.plus.webview.create(this.appUrl + `/#/examCertifiedDetail/${this.$route.query.appTkhId}/${this.$route.query.resId}/${this.$route.query.id}?examIframeToken=${this.token}&examIframeLang=${this.locale[this.$i18n.locale]}&examIframeUsrId=${window.localStorage.getItem('usrSteUsrId')}`);
                    var embed = window.plus.webview.create(this.appUrl + `/mobile/#/examCertifiedDetail/${this.$route.query.appTkhId}/${this.$route.query.resId}/${this.$route.query.id}?examIframeToken=${this.token}&examIframeLang=${this.locale[this.$i18n.locale]}&examIframeUsrId=${window.localStorage.getItem('usrSteUsrId')}`);
                    embed.onclose = () => this.embedClose();
                    ws.append(embed);
                } else {
                    document.addEventListener('plusready', () => {
                        this.isAPP = true;
                        var ws = window.plus.webview.currentWebview();
                        var embed = window.plus.webview.create(this.appUrl + `/mobile/#/examCertifiedDetail/${this.$route.query.appTkhId}/${this.$route.query.resId}/${this.$route.query.id}?examIframeToken=${this.token}&examIframeLang=${this.locale[this.$i18n.locale]}&examIframeUsrId=${window.localStorage.getItem('usrSteUsrId')}`);
                        embed.onclose = () => this.embedClose();
                        ws.append(embed);
                    }, false);
                }
            } else {
                this.$router.push(`/examCertifiedDetail/${this.$route.query.appTkhId}/${this.$route.query.resId}/${this.$route.query.id}`);
            }
        },
        embedClose() {
            this.getDetail();
            if (this.$route.query.type !== '1') {
                this.checkTestPrev();
            }
        },
        // 判断是否正在评分和获取打开次数
        checkTestPrev() {
            this.$axios({
                method: 'GET',
                url: '/app/module/check-test-prev',
                params: {
                    modId: this.$route.query.resId
                }
            }).then((result) => {
                this.conutObj = result.data;
                this.isShow = true;
            }).catch(err => {
                // Notify({
                //     message: err.errMsg,
                //     color: '#fff',
                //     background: '#D9001B'
                // });
                if (err.errCode === 'MODULE_PREV_MAX_ATTEMPT') {
                    this.isShow = false;
                } else if (err.errCode === 'MODULE_PREV_NOT_IN_TIME') {
                    this.isShow = false;
                }
            });
        }
    },
    mounted() {
        this.getDetail();
        if (this.$route.query.type !== '1') {
            this.checkTestPrev();
        }
    },
    watch: {
    }
};
</script>

<style scoped lang="less">
  .content{
    width: 90%;
    padding: 15px 0;
    margin: 70px auto;
    background: white;
    border-radius: 5px;
    height: fit-content;
    .title{
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
    }
    .content-box{
      .score-box{
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid #eee;
        .score{
          span:nth-child(1){
            color: #F59A23;
            font-weight: 700;
            font-size: 45px;
          }
        }
        .score-tip{
          color: #70B603;
          padding-top: 10px;
        }
      }
    }
    .info-box{
      padding-top: 15px;
      div{
        padding: 5px 0;
        span{
          display: inline-block;
        }
        span:nth-child(1){
          width: 40%;
          text-align: right;
          color: #7F7F7F;
        }
        span:nth-child(2){
          width: 60%;
          color: #333333;
        }
      }
    }
  }
  .bot-btn{
    position: fixed;
    bottom: 0;
    height: 60px;
    background: white;
    width: 100%;
    left: 0;
    text-align: center;
    .box{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      span{
        height: 35px;
        display: inline-block;
        background: rgba(0, 174, 239, 1);
        color: white;
        width: 80%;
        line-height: 35px;
        border-radius: 35px;
      }
    }
  }
</style>
